fix: race condition #686
fix: race condition #686
Conversation
src/html5-qrcode-scanner.ts
Outdated
| @@ -324,6 +326,8 @@ export class Html5QrcodeScanner { | |||
| * fails otherwise. | |||
| */ | |||
| public clear(): Promise<void> { | |||
| this.isClearing = true; | |||
There was a problem hiding this comment.
Shouldn't you reset this state when clear() is done? Like in line 342?
There was a problem hiding this comment.
I tried that but it doesn't fix the issue. Let me explain why:
In react 18 development mode, useEffect runs twice to make sure that the component is resilient to unmounting and remounting.
This means that in react this library receives these calls in rapid succession:
render() // First render
clear() // Clear is called and finishes before the first render is complete
render() // Second render
Because the clear function is called and is done executing before the first render is completed, there will be two rendered QR code scanners by the end of these calls. We need to pretty much cancel the first render completely when clear is called. That means that the isClearing variable should be reset to false only if another render is called.
I think a better naming for the variable is: isCleared. I renamed it.
Fix race condition when render/clear is called in rapid succession. This issue was first spotted when trying to use this library in react: Relevant issue : briosheje/react-html5-qrcode-reader#2
itsUndefined
force-pushed
the
patch-2
branch
from
f22802e
to
b785627
Compare
|
@mebjas can we please get this merged, this issue is really annoying. |
|
@mebjas this is still an issue, can we get this merged....? |
|
@mebjas, this issue is still open and seems like the issues you raised have been dealt with. |
Fix race condition when render/clear is called in rapid succession. This issue was first spotted when trying to use this library in react:
Relevant issue : briosheje/react-html5-qrcode-reader#2
Closes:
#668
#641
#500